<template>
  <el-container>
    <el-aside
      v-show="
        daside.aside.settings.mode == 1 &&
        !dheader.header.row2.isSubpageFullScreen
      "
      :class="
        (daside.aside.Daside ? 'mode1 hide' : 'mode1') +
        (daside.aside.isDasideHide ? '' : ' display')
      "
      :width="
        daside.aside.isCollapse && !daside.aside.Daside ? '66px' : '250px'
      "
      id="Daside"
    >
    </el-aside>
    <el-container>
      <el-header>
        <Settings></Settings>
        <Dheader></Dheader>
      </el-header>
      <el-main id="el-main">
        <el-scrollbar ref="scrollbarRef">
          <div class="view" v-loading="!dheader.header.row2.isRefresh">
            <router-view
              v-slot="{ Component, route }"
              v-if="dheader.header.row2.isRefresh"
              ><keep-alive :exclude="[]">
                <transition
                  enter-active-class="animate__animated animate__fadeIn animate__delay-1s"
                  leave-active-class="animate__animated animate__fadeOutLeft"
                >
                  <component :is="Component" :key="route.path"
                /></transition> </keep-alive
            ></router-view>
            <transition
              enter-active-class="animate__animated animate__fadeIn"
              leave-active-class="animate__animated animate__fadeOut"
            >
              <div
                :class="
                  (daside.aside.settings.isRightSide
                    ? 'smallmenu'
                    : 'smallmenu isright') +
                  (daside.aside.settings.isHover ? ' ishover' : '')
                "
                @mouseenter="smallMenuEnter()"
                @mouseleave="smallMenuLeave()"
                @touchstart="smallMenuTouch($event)"
                @click="backTop()"
                v-show="
                  daside.aside.settings.isSmallMenuState ||
                  daside.aside.settings.isSmallMenuDisplay
                "
                id="smallmenu"
              >
                <svg
                  t="1660104222783"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2536"
                  width="30"
                  height="30"
                >
                  <path
                    d="M512 370.9c-22 0-39.9 17.9-39.9 40 0 22 17.9 39.9 39.9 39.9s39.9-17.9 39.9-39.9c0-22.1-17.9-40-39.9-40z m0 64.2c-13.3 0-24.2-10.8-24.2-24.2s10.8-24.2 24.2-24.2c13.3 0 24.2 10.8 24.2 24.2s-10.9 24.2-24.2 24.2z"
                    fill="var(--theme-color)"
                    p-id="2537"
                  ></path>
                  <path
                    d="M646.2 210.3C626.2 175.9 557.5 64 511.5 64c-45.9 0-114.4 112-134.3 146.3-33.6 57.9-91.4 174.3-106.9 309.9-40.5 58.8-61.9 126.7-61.9 196.8 0 60.3 16.3 120.3 47.3 173.3 5.6 9.7 16 15.6 27.2 15.6s21.6-6 27.2-15.7c14.7-25.3 33.6-45.9 57.4-62.4 26.8 23.5 57.1 40.1 89.4 48.9v51.7c0 17.4 14.1 31.5 31.5 31.5h47.2c17.4 0 31.5-14.1 31.5-31.5v-51.7c32.3-8.9 62.6-25.5 89.4-48.9 23.8 16.5 42.7 37 57.5 62.4 5.6 9.7 16 15.7 27.2 15.7s21.6-6 27.2-15.6c30.9-53.1 47.2-113 47.2-173.3 0-70.1-21.4-138-62-196.8-15.5-135.7-73.7-252-107.4-309.9zM535.6 681.2h-47.2c-4.4 0-7.9 3.5-7.9 7.9V842c-99.2-19.3-174.9-127.1-174.9-253.5 0-133.1 48.1-256.6 98.1-345.7h216.1c50.3 89.1 98.6 212.5 98.6 345.7 0 126.4-75.7 234.2-174.9 253.5V689.1c0-4.4-3.5-7.9-7.9-7.9z m-7.9 15.7v223.7h-31.5V696.9h31.5zM290.5 562c-0.4 8.8-0.7 17.6-0.7 26.5 0 77.1 27 147.7 70.2 197.8-31.3 18.7-57.2 42.8-76.9 72.6C260 814.8 247.7 766 247.8 717c0-54.5 14.8-107.5 42.7-155z m220.9-458.7c10.9 1.6 54.8 48.6 99.3 123.7h-198c44.4-75 87.9-122.1 98.7-123.7z m222.7 485.2c0-8.9-0.2-17.8-0.7-26.5 28 47.5 42.8 100.5 42.8 155 0 49-12.2 97.8-35.4 141.9-19.7-29.8-45.7-54-77-72.7 43.2-50 70.3-120.6 70.3-197.7z"
                    fill="var(--theme-color)"
                    p-id="2538"
                  ></path>
                </svg>
                <div class="item1">
                  <el-icon :size="20" @click.stop="dasideDisplay()"
                    ><IEpExpand v-if="daside.aside.isCollapse"></IEpExpand
                    ><IEpFold v-else></IEpFold
                  ></el-icon>
                </div>
                <div class="item2">
                  <el-icon
                    :size="20"
                    @click.stop="
                      daside.aside.settings.isRightSide =
                        !daside.aside.settings.isRightSide
                    "
                    ><IEpArrowLeftBold
                      v-if="daside.aside.settings.isRightSide"
                    ></IEpArrowLeftBold
                    ><IEpArrowRightBold v-else></IEpArrowRightBold
                  ></el-icon>
                </div></div
            ></transition></div
        ></el-scrollbar>
      </el-main>
    </el-container>
    <div id="mask" :class="daside.aside.isMask ? 'mask' : ''"></div>
  </el-container>

  <teleport :to="daside.aside.settings.mode == 1 ? '#Daside' : '#DheaderR1C1'">
    <Daside></Daside>
  </teleport>
</template>

<script lang="ts">
export default {
  // name:'Dmain'
};
</script>
<script setup lang="ts">
import { useDheader } from "../store/Dheader";
import { useDaside } from "../store/Daside";
import Daside from "./aside/Daside.vue";
import Dheader from "./header/Dheader.vue";
import { ElScrollbar } from "element-plus";
import _ from "lodash";
const Settings = defineAsyncComponent(() => import("./aside/Settings.vue"));
const dheader = useDheader();
const daside = useDaside();

const dasideDisplay = () => {
  daside.aside.isCollapse = !daside.aside.isCollapse;
  if (!daside.aside.isCollapse && daside.aside.Daside) {
    daside.aside.isMask = true;
    daside.aside.isDasideHide = false;
  } else {
    daside.aside.isDasideHide = true;
  }
};

//小菜单功能
let timeout1: NodeJS.Timeout;
//PC端
const smallMenuEnter = _.throttle(() => {
  clearTimeout(timeout1);
  daside.aside.settings.isHover = true;
}, 2000);
const smallMenuLeave = _.throttle(() => {
  timeout1 = setTimeout(() => {
    daside.aside.settings.isHover = false;
  }, 3000);
}, 2000);
//PC端
//移动端
const smallMenuTouch = _.throttle((e: any) => {
  // console.log(3);
  if (!daside.aside.settings.isHover) e.preventDefault();
  clearTimeout(timeout1);
  daside.aside.settings.isHover = true;
}, 2000);
window.addEventListener("touchstart", (event: any) => {
  if (daside.aside.settings.isHover) {
    var e = event || window.event;
    var el = e.srcElement || e.target;
    while (el) {
      if (["smallmenu"].indexOf(el.id) > -1) {
        e.preventDefault();
        e.stopPropagation();
        return;
      }
      el = el.parentNode;
    }
    timeout1 = setTimeout(() => {
      daside.aside.settings.isHover = false;
    }, 2000);
  }
});
//移动端

const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>();
let timeinterval: NodeJS.Timeout;
onMounted(() => {
  //pC端和移动端
  document.onwheel = scrollToTop;
  document.ontouchmove = scrollToTop;
});
const backTop = _.throttle(() => {
  timeinterval = setInterval(function () {
    let backTop = scrollbarRef.value?.wrap$?.scrollTop!;
    let speedTop = backTop / 50;

    scrollbarRef.value?.setScrollTop(backTop - speedTop);
    if (backTop <= 0) {
      daside.aside.settings.isSmallMenuDisplay = false;
      clearInterval(timeinterval);
    }
  }, 1);
}, 2000);
let timeout2: NodeJS.Timeout;
const scrollToTop = _.throttle(() => {
  let scroll = scrollbarRef.value?.wrap$?.scrollTop!;
  clearTimeout(timeout2);
  if (scroll >= 200) {
    timeout2 = setTimeout(() => {
      daside.aside.settings.isSmallMenuDisplay = true;
    }, 100);
  } else {
    timeout2 = setTimeout(() => {
      daside.aside.settings.isSmallMenuDisplay = false;
    }, 100);
  }
}, 500);
//小菜单功能
</script>
<style scoped lang="scss">
.el-container {
  width: 100%;
  height: 100%;
}

.mode1 {
  height: 100%;
  overflow: hidden;
  transition: width 0.35s ease;

  &.hide {
    transition: all 0.66s ease;
    position: absolute;
    z-index: 10001;
    left: -250px;
  }
  &.display {
    left: 0px;
  }
}

.el-header {
  width: 100%;
  height: fit-content;
  padding: 0px;
  background-color: #fff;
}

:deep(.el-main) {
  padding: 0px;
}
.el-main {
  width: 100%;
  height: 80%;
  background: #f5f4f4;
  .el-scrollbar {
    :deep(.el-scrollbar__view:first-child) {
      height: 100%;

      .view {
        padding: 20px;
        padding-bottom: 0px;
        height: calc(100% - 20px);
        width: calc(100% - 40px);

        .smallmenu {
          position: absolute;
          z-index: 9999;
          right: 30px;
          bottom: 40px;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          border: 1px solid rgb(41, 41, 41);
          background-color: #ffffff;

          display: flex;
          align-items: center;
          justify-content: center;
          svg {
            color: var(--theme-color);
          }

          .item1 {
            position: absolute;
            top: 0px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid rgb(176, 176, 176);
            background-color: #ffffff;

            display: flex;
            align-items: center;
            justify-content: center;

            opacity: 0;
            transform: rotateX(180deg);
            transition: all 0.66s ease;
          }

          .item2 {
            position: absolute;
            right: 0px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid rgb(176, 176, 176);
            background-color: #ffffff;

            display: flex;
            align-items: center;
            justify-content: center;

            opacity: 0;
            transform: rotateY(180deg);
            transition: all 0.66s ease;
          }

          &.ishover {
            .item1 {
              top: -50px;
              opacity: 1;
              transform: rotateX(360deg);
            }

            .item2 {
              right: 50px;
              opacity: 1;
              transform: rotateY(360deg);
            }
          }

          &.isright {
            left: 30px;
            .item2 {
              left: 0px;
            }
            &.ishover {
              .item2 {
                left: 50px;
                opacity: 1;
                transform: rotateY(360deg);
              }
            }
          }
        }
      }
    }
  }
}

.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background-color: rgba(15, 15, 15, 0.3);
}
</style>
